<template>
	<view class="app">
		<!-- <view class="search">
			<u-search placeholder="请输入关键字" v-model="queryForm1.formData.keywords" @search="search" @custom="search"
				:show-action="true">
			</u-search>
		</view> -->
		<u-notice-bar mode="horizontal" :speed="80" :list="topList"></u-notice-bar>
		<view class="top">
			<view class="top-tips"></view>
		</view>
		<mescroll-uni top="60rpx" bottom="120rpx" ref="mescrollRef" @init="mescrollInit" :down="downOption"
			@down="downCallback" :up="upOption" @up="upCallback">
			<view class="list-item" v-for="(item, index) in dataList" :key="item._id" :data-id="item._id">
				<view class="">
					<view class="item-title">{{ item._add_user_name }}</view>
					<view class="list-time">{{ vk.pubfn.timeFormat(item._add_time, "yyyy-MM-dd hh:mm:ss") }}</view>
				</view>
				<view class="list-row">{{ item.content }}</view>
				<view class="reply-bar">
					<view class="reply-list-item" v-for="(rep, indx) in item.children" :key="indx">
						<view class="">
							<view class="item-title">{{ rep._add_user_name }}</view>
							<view class="list-time">{{ vk.pubfn.timeFormat(rep._add_time, "yyyy-MM-dd hh:mm") }}</view>
						</view>
						<view class="">{{ rep.content }}</view>
					</view>
				</view>
				<view class="list-row">
					<text v-if="isAdmin" class="link" @click="showReply(item._id)">回复</text>
				</view>
			</view>
		</mescroll-uni>
		<view class="bottom-icon-btn" @click="toDetail">
			<image src="/static/min_button_select.png" mode=""></image>
		</view>

		<u-mask :show="replyShow" @click="replyShow = false">
			<view class="reply-form">
				<Reply v-if="replyShow" :feedback_id="id" @success="replySuccess" />
			</view>
		</u-mask>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import Reply from "./components/reply.vue"

	export default {
		mixins: [MescrollMixin], // 下拉刷新和上拉加载的组件
		components: {
			Reply
		},
		data() {
			return {
				id: '',
				replyShow: false,
				isAdmin: false,
				
				topList: [
					'咨询热线：96151（客服工作时间：除国家法定节假日外，周一到周五 9:00-16:30）'
				],

				dataList: [],
				// 列表查询请求数据
				queryForm1: {
					// 分页数据
					pagination: {
						pageIndex: 1, //当前页码
						pageSize: 100, //每页显示数量
					},
					// 表单数据源
					formData: {
						category_id: "", // 资料类型
						title: "", // 标题
						keywords: "", // 关键字
						is_hot: null, // 热门
					},
					// 查询匹配规则
					columns: [{
						key: "keywords",
						mode: "%%",
						fieldName:"content",
					}, ],
					// 排序规则
					sortRule: [{
						name: "_add_time",
						type: "desc"
					}, ]
				},
				downOption: {
					auto: false, //是否在初始化后,自动执行上拉回调callback; 默认true					
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行上拉回调callback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 12 // 每页数据的数量
					},
					noMoreSize: 8, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					textNoMore: '没有更多数据',
					empty: {
						tip: '~ 搜索无结果 ~', // 提示
						btnText: ''
					}
				},
			}
		},
		onLoad(options = {}) {
			this.initPage(options);
		},
		onShow() {
			// this.mescroll && this.mescroll.resetUpScroll();
		},
		methods: {
			// 点击回复按钮
			showReply(id) {
				this.id = id;
				this.replyShow = true;
			},
			toDetail(e) {
				// console.log('toDetail', e)
				// console.log('toDetail', e.currentTarget.dataset.id)
				if (e && e.currentTarget.dataset.id) vk.navigateTo('/pages/feedback/detail?id=' + e.currentTarget.dataset
					.id);
				else vk.navigateTo('/pages/feedback/detail');
			},
			// 页面数据初始化函数
			initPage(options) {
				// 登录账号是调委会，才显示“回复”按钮
				const role = vk.getVuex("$user.userInfo.role[0]");
				this.isAdmin = role == 'tiaojie_admin';
			},
			search() {
				this.mescroll.resetUpScroll();
			},
			// 获取列表
			upCallback(page) {
				// console.log('upCallback', page)

				let url = !vk.getVuex("$user.userInfo.role[0]") ? this.$api.FeedbackList : this.$api.FeedbackAllList;

				vk.callFunction({
						url,
						loading: true,
						data: {
							...this.queryForm1,
							pagination: {
								pageIndex: page.num, //当前页码
								pageSize: page.size, //每页显示数量
							},
						},
					})
					.then(res => {
						// console.log('获取列表res', res)
						this.mescroll.endSuccess(res.total);
						if (res.rows.length > 0) {
							if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
							this.dataList = this.dataList.concat(res.rows); //追加新数据
						} else{
							this.dataList = [];
							this.$util.toast('暂无搜索内容');
						}
					}).catch((err) => {
						console.log('联网失败, 结束加载', err)
						this.mescroll.endErr();
						this.dataList = [];
						// this.$util.toast('暂无搜索内容');
					})
			},
			replySuccess() {
				console.log('replySuccess')
				this.id = '';
				this.replyShow = false;
				this.mescroll.resetUpScroll();
			},
		}
	}
</script>